<template>
	<div class="modelAttribute" v-if="attributeData">
		<!-- 名称 -->
		<div class="modelAttribute-item">
			<span class="label">物体名称</span>
			<el-input
				v-model="attributeData.DisplayName"
				suffix-icon="el-icon-edit"
				:disabled="inputEnabled"
				@blur="changePoint"
			></el-input>
		</div>
		<!-- 位置平移 -->
		<div class="modelAttribute-item">
			<span class="label head">位置</span>
			<div class="modelAttribute-setstep">
				<el-popover placement="left" trigger="click" popper-class="leftPopver">
					<span slot="reference">设置步长</span>
					<template #default>
						<el-input
							size="mini"
							style="width: 95px"
							@blur="confirmStep('translation')"
							v-model="step.translation"
							type="number"
						></el-input>
					</template>
				</el-popover>
			</div>
		</div>
		<div class="modelAttribute-item" @mouseenter="showStep.x = true" @mouseleave="showStep.x = false">
			<span class="label">坐标X(m)</span>
			<el-input
				v-model="attributeData.Transform.translation.x"
				:disabled="inputEnabled"
				@blur="changePoint"
				type="number"
			></el-input>
			<div class="step" v-show="showStep.x">
				<i class="el-icon-arrow-up" @click="toggleInputValue('x', 1)"></i>
				<i class="el-icon-arrow-down" @click="toggleInputValue('x', 0)"></i>
			</div>
		</div>
		<div class="modelAttribute-item" @mouseenter="showStep.y = true" @mouseleave="showStep.y = false">
			<span class="label">坐标Y(m)</span>
			<el-input
				v-model="attributeData.Transform.translation.y"
				:disabled="inputEnabled"
				@blur="changePoint"
				type="number"
			></el-input>
			<div class="step" v-show="showStep.y">
				<i class="el-icon-arrow-up" @click="toggleInputValue('y', 1)"></i>
				<i class="el-icon-arrow-down" @click="toggleInputValue('y', 0)"></i>
			</div>
		</div>
		<div class="modelAttribute-item" @mouseenter="showStep.z = true" @mouseleave="showStep.z = false">
			<span class="label">坐标Z(m)</span>
			<el-input
				v-model="attributeData.Transform.translation.z"
				:disabled="inputEnabled"
				@blur="changePoint"
				type="number"
			></el-input>
			<div class="step" v-show="showStep.z">
				<i class="el-icon-arrow-up" @click="toggleInputValue('z', 1)"></i>
				<i class="el-icon-arrow-down" @click="toggleInputValue('z', 0)"></i>
			</div>
		</div>
		<!-- 旋转角度 -->
		<div class="modelAttribute-item">
			<span class="label head">旋转</span>
			<div class="modelAttribute-setstep">
				<el-popover placement="left" trigger="click" popper-class="leftPopver">
					<span slot="reference">设置步长</span>
					<template #default>
						<el-input
							size="mini"
							style="width: 95px"
							@blur="confirmStep('rotation')"
							v-model="step.rotation"
							type="number"
						></el-input>
					</template>
				</el-popover>
			</div>
		</div>
		<div
			class="modelAttribute-item"
			@mouseenter="showStep.pitch = true"
			@mouseleave="showStep.pitch = false"
		>
			<span class="label">俯仰角(deg)</span>
			<el-input
				v-model="attributeData.Transform.rotation.pitch"
				:disabled="inputEnabled"
				@blur="changePoint"
				type="number"
			></el-input>
			<div class="step" v-show="showStep.pitch">
				<i class="el-icon-arrow-up" @click="toggleInputValue('pitch', 1)"></i>
				<i class="el-icon-arrow-down" @click="toggleInputValue('pitch', 0)"></i>
			</div>
		</div>
		<div
			class="modelAttribute-item"
			@mouseenter="showStep.roll = true"
			@mouseleave="showStep.roll = false"
		>
			<span class="label">偏航角(deg)</span>
			<el-input
				v-model="attributeData.Transform.rotation.roll"
				:disabled="inputEnabled"
				@blur="changePoint"
				type="number"
			></el-input>
			<div class="step" v-show="showStep.roll">
				<i class="el-icon-arrow-up" @click="toggleInputValue('roll', 1)"></i>
				<i class="el-icon-arrow-down" @click="toggleInputValue('roll', 0)"></i>
			</div>
		</div>
		<div
			class="modelAttribute-item"
			@mouseenter="showStep.yaw = true"
			@mouseleave="showStep.yaw = false"
		>
			<span class="label">翻滚角(deg)</span>
			<el-input
				v-model="attributeData.Transform.rotation.yaw"
				:disabled="inputEnabled"
				@blur="changePoint"
				type="number"
			></el-input>
			<div class="step" v-show="showStep.yaw">
				<i class="el-icon-arrow-up" @click="toggleInputValue('yaw', 1)"></i>
				<i class="el-icon-arrow-down" @click="toggleInputValue('yaw', 0)"></i>
			</div>
		</div>
		<!-- 缩放 -->
		<div class="modelAttribute-item">
			<span class="label head">
				缩放
				<i class="el-icon-lock" v-if="isLock" @click="isLock = !isLock"></i>
				<i class="el-icon-unlock" v-else @click="isLock = !isLock"></i>
			</span>
			<div class="modelAttribute-setstep">
				<el-popover placement="left" trigger="click" popper-class="leftPopver">
					<span slot="reference">设置步长</span>
					<template #default>
						<el-input
							size="mini"
							style="width: 95px"
							@blur="confirmStep('scale')"
							v-model="step.scale"
							type="number"
						></el-input>
					</template>
				</el-popover>
			</div>
		</div>
		<div
			class="modelAttribute-item"
			@mouseenter="showStep.lang = true"
			@mouseleave="showStep.lang = false"
		>
			<span class="label">坐标X</span>
			<el-input
				v-model="attributeData.Transform.scale.x"
				:disabled="inputEnabled"
				@blur="changePoint"
				type="number"
			></el-input>
			<div class="step" v-show="showStep.lang">
				<i class="el-icon-arrow-up" @click="toggleInputValue('lang', 1)"></i>
				<i class="el-icon-arrow-down" @click="toggleInputValue('lang', 0)"></i>
			</div>
		</div>
		<div
			class="modelAttribute-item"
			@mouseenter="showStep.width = true"
			@mouseleave="showStep.width = false"
		>
			<span class="label">坐标Y</span>
			<el-input
				v-model="attributeData.Transform.scale.y"
				:disabled="inputEnabled"
				@blur="changePoint"
				type="number"
			></el-input>
			<div class="step" v-show="showStep.width">
				<i class="el-icon-arrow-up" @click="toggleInputValue('width', 1)"></i>
				<i class="el-icon-arrow-down" @click="toggleInputValue('width', 0)"></i>
			</div>
		</div>
		<div
			class="modelAttribute-item"
			@mouseenter="showStep.high = true"
			@mouseleave="showStep.high = false"
		>
			<span class="label">坐标Z</span>
			<el-input
				v-model="attributeData.Transform.scale.z"
				:disabled="inputEnabled"
				@blur="changePoint"
				type="number"
			></el-input>
			<div class="step" v-show="showStep.high">
				<i class="el-icon-arrow-up" @click="toggleInputValue('high', 1)"></i>
				<i class="el-icon-arrow-down" @click="toggleInputValue('high', 0)"></i>
			</div>
		</div>
	</div>
</template>
 
<script>
import { mapGetters } from 'vuex';

export default {
	name: 'ModelAttribute',
	props: {
		attributeInfo: {
			type: Array | '',
			default: () => []
		}
	},
	computed: {
		...mapGetters('ue4Info', {
			modelData: 'queryModelGroupData'
		}),
		newObj() {
			return JSON.parse(JSON.stringify(this.attributeData));
		}
	},
	watch: {
		attributeInfo(val) {
			this.attributeData = val ? val : '';
			this.setAttributeData();
		},
		'newObj.Transform.scale': {
			handler: function (newVal, oldVal) {
				if (this.isLock && oldVal && newVal) {
					if (newVal.x !== oldVal.x) {
						this.attributeData.Transform.scale.y = newVal.x;
						this.attributeData.Transform.scale.z = newVal.x;
					} else if (newVal.y !== oldVal.y) {
						this.attributeData.Transform.scale.x = newVal.y;
						this.attributeData.Transform.scale.z = newVal.y;
					} else if (newVal.z !== oldVal.z) {
						this.attributeData.Transform.scale.x = newVal.z;
						this.attributeData.Transform.scale.y = newVal.z;
					}

					this.changePoint();
				}
			},
			deep: true
		}
	},
	data() {
		return {
			inputEnabled: false /* 是否可以操作 */,
			isLock: true /* 是否锁定缩放 */,
			attributeData: '' /* 属性值 */,
			showStep: {
				/* 是否展示步进器 */
				x: false,
				y: false,
				z: false,
				pitch: false,
				roll: false,
				yaw: false,
				lang: false,
				width: false,
				high: false
			},
			step: {
				/* 步长 */
				translation: 1,
				rotation: 1,
				scale: 1
			}
		};
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			this.attributeData = this.attributeInfo;
			this.setAttributeData();
		},

		// 设置属性数据
		setAttributeData() {
			if (this.attributeData) {
				this.attributeData.Transform.translation.x = Number(
					this.attributeData.Transform.translation.x
				).toFixed(2);
				this.attributeData.Transform.translation.y = Number(
					this.attributeData.Transform.translation.y
				).toFixed(2);
				this.attributeData.Transform.translation.z = Number(
					this.attributeData.Transform.translation.z
				).toFixed(2);
				this.attributeData.Transform.rotation.pitch = Number(
					this.attributeData.Transform.rotation.pitch
				).toFixed(2);
				this.attributeData.Transform.rotation.roll = Number(
					this.attributeData.Transform.rotation.roll
				).toFixed(2);
				this.attributeData.Transform.rotation.yaw = Number(
					this.attributeData.Transform.rotation.yaw
				).toFixed(2);
				this.attributeData.Transform.scale.x = Number(this.attributeData.Transform.scale.x).toFixed(2);
				this.attributeData.Transform.scale.y = Number(this.attributeData.Transform.scale.y).toFixed(2);
				this.attributeData.Transform.scale.z = Number(this.attributeData.Transform.scale.z).toFixed(2);
			}
		},

		// 修改input的值
		toggleInputValue(type, mode) {
			if (mode) {
				if (type == 'x' || type == 'y' || type == 'z') {
					this.attributeData.Transform.translation[type] = (
						Number(this.attributeData.Transform.translation[type]) + Number(this.step.translation)
					).toFixed(2);

					this.changePoint();
				} else if (type == 'pitch' || type == 'roll' || type == 'yaw') {
					this.attributeData.Transform.rotation[type] = (
						Number(this.attributeData.Transform.rotation[type]) + Number(this.step.rotation)
					).toFixed(2);

					this.changePoint();
				} else {
					let Type = type == 'lang' ? 'x' : type == 'width' ? 'y' : 'z';
					this.attributeData.Transform.scale[Type] = (
						Number(this.attributeData.Transform.scale[Type]) + Number(this.step.scale)
					).toFixed(2);
				}
			} else {
				if (type == 'x' || type == 'y' || type == 'z') {
					this.attributeData.Transform.translation[type] = (
						Number(this.attributeData.Transform.translation[type]) - Number(this.step.translation)
					).toFixed(2);

					this.changePoint();
				} else if (type == 'pitch' || type == 'roll' || type == 'yaw') {
					this.attributeData.Transform.rotation[type] = (
						Number(this.attributeData.Transform.rotation[type]) - Number(this.step.rotation)
					).toFixed(2);

					this.changePoint();
				} else {
					let Type = type == 'lang' ? 'x' : type == 'width' ? 'y' : 'z';

					this.attributeData.Transform.scale[Type] = (
						Number(this.attributeData.Transform.scale[Type]) - Number(this.step.scale)
					).toFixed(2);
				}
			}
		},

		// 修改点位
		changePoint() {
			$ue4.setActorData(this.attributeData);

			this.modelData.map((item) => {
				if (item.Data.NameInLevel === this.attributeData.NameInLevel) {
					item.Data.DisplayName = this.attributeData.DisplayName;
				}
			});
		},

		// 步长
		confirmStep(type) {
			if ($xy.IS(this.step[type].toString())) {
				this.$message.warning('步长不能为空');
				this.step[type] = 0.1;
			}
		}
	}
};
</script>
 
<style lang="scss">
.modelAttribute {
	height: 100%;

	.modelAttribute-item {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5px;
		height: 32px;

		.label {
			display: flex;
			align-items: center;
			min-width: 85px;
			@include xy-stopselect;

			i {
				margin-left: 5px;
				font-size: 16px;
				cursor: pointer;
			}

			.el-icon-unlock {
				color: rgb(234, 234, 234);
			}
		}

		.head {
			color: #ccc;
		}

		.modelAttribute-setstep {
			text-decoration: underline;
			@include xy-stopselect;
			cursor: pointer;

			&:active {
				color: #ccc;
			}
		}

		.step {
			position: absolute;
			display: flex;
			flex-direction: column;
			right: 8px;

			i {
				cursor: pointer;
				transform: scale(0.8);

				&:hover {
					color: #fff;
					font-weight: bold;
				}
			}
		}
	}
}
</style>